<template>
  <div>
    <div class="container">
      <h3>
        用户管理
      </h3>
      <el-divider />
      <div class="handle-box">
        <el-input :clearable="true" size="small" v-model="tableInfo.username" placeholder="姓名"
                  class="handle-input mr10"></el-input>
        <el-button type="primary" :icon="Search" size="small"
                   @click="queryUserPage(tableInfo.current,tableInfo.size,tableInfo.username,tableInfo)">搜索
        </el-button>
        <el-button type="primary" size="small" @click="reset">重置</el-button>
      </div>
      <div class="handle-box">
        <el-button type="primary" size="small" :icon="Plus" @click="openDialog(null)">新增</el-button>
      </div>
      <el-table :stripe="true" :data="tableInfo.records" border class="table" ref="multipleTable"
                header-cell-class-name="table-header">
        <el-table-column type="index" width="55" label="序号"/>
        <el-table-column label="头像" width="80" align="center">
          <template #default="scope">
            <el-avatar shape="square" :size="40" fit="fill"
                       src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-avatar>
          </template>
        </el-table-column>
        <el-table-column width="150" align="center">
          <template #header>
            <div @click="changeEye">
              <span>密码<el-icon><View v-if="seePassword"/><Hide v-else/></el-icon>
              </span>
            </div>
          </template>
          <template #default="scope" >
              <div v-if="seePassword">
                <span>{{scope.row.password}}</span>
              </div>
              <div v-else>
                <span>*******</span>
              </div>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" v-for="item in tableColumnData" :prop="item.prop"
                         :label="item.label" align="center"></el-table-column>
        <el-table-column label="角色" width="80" align="center">
          <template #default="scope">
            <el-text v-for="(item,index) in roleList.data" :key="index">
                    <span v-if="item.id == scope.row.roleId">
                      <el-tag :type="tagType[index]" effect="dark">{{ item.name }}</el-tag>
                    </span>
            </el-text>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" align="center">
          <template #default="scope">
            <el-button type="warning" size="small" :icon="Edit" @click="openDialog(scope.row)">
              编辑
            </el-button>
            <el-button type="danger" size="small" :icon="Delete" @click="remove(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
            background
            layout="total, prev, pager, next"
            :current-page="tableInfo.current"
            :page-size="tableInfo.size"
            :total="tableInfo.total"
            @current-change="currentChange"
            @size-change="sizeChange"
        ></el-pagination>
      </div>
    </div>
    <div>
      <el-dialog
          v-model="dialogInfo.visit"
          :title="dialogInfo.title"
          width="500"
      >
        <el-divider />
        <el-form :model="dialogInfo.form" label-width="auto" style="max-width: 600px">
          <el-form-item label="用户名">
            <el-input v-model="dialogInfo.form.username"/>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="dialogInfo.form.password"/>
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input v-model="dialogInfo.form.mobile"/>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio-group v-model="dialogInfo.form.sex">
              <el-radio value="男">男</el-radio>
              <el-radio value="女">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="权限角色">
            <el-select v-model="dialogInfo.form.roleId">
              <el-option v-for="item in roleList.data" :label="item.name" :value="item.id"/>
            </el-select>
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogInfo.visit = false">取消</el-button>
            <el-button type="primary" @click="save()">
              确认
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>

  </div>
</template>

<script setup lang="ts" name="basetable">
import {ref} from 'vue';
import {ElMessage, ElMessageBox} from 'element-plus';
import {Delete, Edit, Search, Plus, Hide} from '@element-plus/icons-vue';
import {queryUserPage, removeUser, saveUser} from '@/api/user'
import {getRoleList} from '@/api/role'
import {tagType} from "@/api/common";

const seePassword = ref(false)
/**列表内容*/
const tableColumnData = ref([
  {
    prop: 'username',
    label: '用户名'
  },
  {
    prop: 'mobile',
    label: '联系电话'
  },
  {
    prop: 'sex',
    label: '性别'
  }

])
/**列表信息*/
const tableInfo = ref(
    {
      current: 1,
      size: 10,
      total: 0,
      username: '',
      records: []
    }
)

const dialogInfo = ref({
  visit: false,
  title: '',
  form: {
    id: '',
    username: '',
    sex: '男',
    password: '',
    mobile: '',
    roleId: ''
  }
})

const roleList = ref(
    {
      data: []
    }
)

const changeEye =()=>{
  seePassword.value = !seePassword.value
}

const search = () => {
  queryUserPage(tableInfo.value.current, tableInfo.value.size, tableInfo.value.username, tableInfo.value)
}
const currentChange = (pageNo: number) => {
  console.log("页数变化")
  tableInfo.value.current = pageNo
  search()
}

const sizeChange = (pageSize: number) => {
  console.log("页数大小变化")
  tableInfo.value.size = pageSize
  search()
}

const reset = () => {
  console.log("重置")
  tableInfo.value.current = 1
  tableInfo.value.size = 10
  tableInfo.value.username = ''
  search()
}

const remove = (id: number) => {
  console.log("删除")
  ElMessageBox.confirm('确定要删除吗？', '提示', {
    type: 'warning'
  }).then(() => {
    removeUser(id).then(res => {
      ElMessage.success("删除成功")
      search()
    })
  })
}

const openDialog = (data:Object) => {
  dialogInfo.value.title = '新增用户'
  if (data != null) {
    dialogInfo.value.title = '修改用户'
    dialogInfo.value.form = data
  }else{
    dialogInfo.value.form = {
      id: '',
      username: '',
      sex: '男',
      password: '',
      mobile: '',
      roleId: ''
    }
  }
  dialogInfo.value.visit = true
}

const save = () => {
  saveUser(dialogInfo.value.form).then(res => {
    dialogInfo.value.visit = false
    ElMessage.success("操作成功")
    search()
    dialogInfo.value.form = {
      id: '',
      username: '',
      sex: '男',
      password: '',
      mobile: '',
      roleId: ''
    }
  })
}

/**
 * 页面初始化调用方法
 */
search()
getRoleList(roleList.value)

</script>

<style scoped>
.tip-text {
  margin-bottom: 10px;
  color: #5a8cc4;
  font-size: 20px;
}

.dialog-box {
  width: 100%;
  height: 100%;
}

.dialog-image {
  float: left;
  width: 20%;
  height: 80%;
  margin-right: 30px;
}

.dialog-content {
  display: inline-block;
  width: 70%;
  height: 80%;
  background-color: #ffffff;
}


.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
  background-color: #6C8CBF;
}

.handle-box {
  margin-bottom: 10px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 200px;
}

.table {
  width: 100%;
  font-size: 14px;
}

.red {
  color: #F56C6C;
}

.mr10 {
  margin-right: 10px;
}

.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}

.avatar {
  width: 178px;
  height: 178px;
}

.el-upload {
  --el-upload-dragger-padding-vertical: 10px;
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

</style>
